<!DOCTYPE html>
<style>
img {
    height: 100%;
}
</style>
<script src="../../resources/check-layout.js"></script>
<script>
function setHeight(){
    document.getElementById('container').style.height = '10px';
}
var numLoads = 0;
function loaded() {
    numLoads++;
    if (numLoads == document.querySelectorAll('img').length)
        checkLayout('img');
}
</script>

<p>You should see two 20x10 green squares below.</p>

<div style="height: 10px">
    <img data-expected-width=20 data-expected-height=10 onload="loaded()" src="">
</div>

<br><br>

<div id="container">
    <!-- 100x50 green square -->
    <img data-expected-width=20 data-expected-height=10 onload="setHeight();loaded()" src="">
</div>
